<template>
  <div class="module_item">
    <div class="header">
      <header>{{ moduleName }}</header>
      <div v-if="rightShow" class="rate">
        <div class="yearRate">同比：+15%</div>
        <div class="circleRate">环比：-15%</div>
      </div>
      <template v-else>
        <slot name="headerRight"></slot>
      </template>
    </div>
    <div class="data_show">
      <template v-if="dataType === 'one'">
        <div
          :class="dataIsOdd === 'odd' ? 'data_item odd' : 'data_item even'"
          v-for="(item, index) in dataListOne"
          :key="index"
        >
          <p>{{ item.data }}</p>
          <p>{{ item.desc }}</p>
        </div>
      </template>
      <template v-else-if="dataType === 'two'">
        <div class="province-item-container">
          <div class="inside_province province_common">
            <p>省内：{{ unit }}</p>
            <p>82739</p>
            <div class="yearRate">同比：+15%</div>
            <div class="circleRate">环比：-15%</div>
          </div>
        </div>
        <div class="province-item-container">
          <div class="inside_province province_common">
            <p>省内：{{ unit }}</p>
            <p>82739</p>
            <div class="yearRate">同比：+15%</div>
            <div class="circleRate">环比：-15%</div>
          </div>
        </div>
        <div class="province-item-container">
          <div class="inside_province province_common">
            <p>省内：{{ unit }}</p>
            <p>82739</p>
            <div class="yearRate">同比：+15%</div>
            <div class="circleRate">环比：-15%</div>
          </div>
        </div>
        <div class="province-item-container">
          <div class="inside_province province_common">
            <p>省内：{{ unit }}</p>
            <p>82739</p>
            <div class="yearRate">同比：+15%</div>
            <div class="circleRate">环比：-15%</div>
          </div>
        </div>
        <!-- <div class="inside_province province_common">
          <p>省内：（套）</p>
          <p>82739</p>
          <div class="yearRate">同比：+15%</div>
          <div class="circleRate">环比：-15%</div>
        </div> -->
      </template>
    </div>
    <div v-if="chartShow" class="chart" style="height: 200px">
      <kt-chart :options="defaultOption"> </kt-chart>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    moduleName: {
      type: String,
      default: "模块名称",
    },
    chartShow: {
      type: Boolean,
      default: true,
    },
    rightShow: {
      type: Boolean,
      default: true,
    },
    dataType: {
      type: String,
      default: "one",
    },
    dataListOne: {
      type: Array,
      default: () => [],
    },
    //单位
    unit: {
      type: String,
      default() {
        return "";
      },
    },
  },
  computed: {
    // 判断数据数组长度的奇偶性
    dataIsOdd() {
      return this.dataListOne.length % 2 == 0 ? "odd" : "even";
    },
  },
  data() {
    return {
      defaultOption: {
        gird: {
          left: 30,
          right: 40,
          bottom: 15,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        // series:null
        series: [
          // {
          //   type:'bar',
          //   data:[10,20,40,90,5,79,50,80]
          // },
          // {
          //   type:'bar',
          //   data:[30,60,90,90,5,79,50,80]
          // },
          // {
          //   type:'line',
          //   data:[10,50,5,90,5,79,50,80]
          // },
          {
            type: "pie",
            label: {
              show: true,
            },
            data: [
              {
                name: "中国",
                value: 0,
              },
              {
                name: "美国",
                value: 0,
              },
              {
                name: "1",
                value: 0,
              },
              {
                name: "2",
                value: 0,
              },
              {
                name: "4",
                value: 0,
              },
              {
                name: "5",
                value: 0,
              },
            ],
          },
        ],
        // xAxis:{
        //     data:['一月','二月','三月','四月','五月','六月','七月','八月'],
        //     type: 'category',
        // },
        // yAxis:[{name:'单位:人'}],
        // ktLimitShowNum:4
      },
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/styles.scss";
.module_item {
  background: #fff;
  overflow: hidden;
  font-size: 14px;
  margin: 24px 0;
  border-radius: 15px;
  .header {
    @include fl(row, space-between);
    color: #333333;
    margin: 15px 0;
    padding-right: 10px;
    header {
      position: relative;
      padding-left: 10px;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 2px;
        height: 100%;
        background: #1790fd;
      }
    }
    .rate {
      font-size: 12px;
      color: #fff;
      @include fl();
    }
  }
  .yearRate {
    width: 76px;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    background: #1790fd;
  }
  .circleRate {
    width: 76px;
    text-align: center;
    padding: 6px;
    border-radius: 6px;
    background: #ff5436;
    margin-left: 5px;
  }
  .data_show {
    @include fl();
    flex-wrap: wrap;
    .data_item {
      margin: 15px 0;
      p {
        margin: 10px 0;
        &:first-child {
          @include fc(32px, #1790fd);
        }
        &:last-child {
          @include fc(13px, #8d8d8d);
        }
      }
    }
    .odd {
      width: 50%;
      text-align: center;
    }
    .even {
      width: 50%;
      text-align: center;
      &:last-child {
        width: 100%;
      }
    }
    .province-item-container {
      width: 50%;
      padding: 10px;
      box-sizing: border-box;
      .province_common {
        padding: 10px;
        background-color: #1790fd05;
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px;
        @include fc(12px, #fff);
        @include fl(column);
        p {
          &:first-child {
            margin-left: -40px;
            @include fc(14px, #8d8d8d);
          }
          &:nth-child(2) {
            @include fc(37px, #1790fd);
            margin: 15px 0;
          }
        }
        .circleRate {
          margin-left: 0;
          margin: 10px 0;
        }
      }
    }
    .province-item-container:nth-child(2n) {
      padding-left: 0px;
    }
  }
  .chart {
    margin: 10px;
    box-sizing: border-box;
    padding: 10px;
    background: #1790fd05;
  }
}
</style>
